<script setup lang="ts">
import { SubmitBtn } from '@fl/components';
import dayjs from 'dayjs';
import { PlusDialog } from 'plus-pro-components';

const emits = defineEmits(["update:show", "confirmTime"]);
const show = defineModel("show");

defineExpose({close})

function close() {
  show.value = false;
  radio.value = 1
}
watchEffect(() => {
  if (show.value&&radio.value===1) {
    endTime.value = dayjs().add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
  }
})
const radio = ref(1)
const endTime = ref(dayjs().add(1, 'day').format('YYYY-MM-DD HH:mm:ss'))
function confirm () {
    emits('confirmTime',endTime.value)
}
function change(val) {
  if (val === 'month') {
    endTime.value = dayjs().add(1, 'month').format('YYYY-MM-DD HH:mm:ss')
  }else{
    endTime.value = dayjs().add(val, 'day').format('YYYY-MM-DD HH:mm:ss')
  }
}
</script>

<template>

<PlusDialog
    v-model="show"
    title="选择禁言时间"
    width="50%"
    destroy-on-close
  >
  <div class="mb-4 font-bold">禁言结束时间：{{ endTime }}</div>
  <el-radio-group v-model="radio" @change="change">
    <el-radio :value="1">1天</el-radio>
    <el-radio :value="3">3天</el-radio>
    <el-radio :value="7">7天</el-radio>
    <el-radio :value="'month'">1个月</el-radio>
  </el-radio-group>
  <template #footer>
      <div class="mx-auto">
        <el-button @click="close"> 取消 </el-button>

        <SubmitBtn type="primary" @click="confirm"> 提交 </SubmitBtn>
      </div>
    </template>
  </PlusDialog>
</template>